<template>
  <div class="a">
    <!-- Form -->

    <el-row class="row-bg">
      <el-col :span="6">
        <el-button type="primary" @click="tjkh()">添加车辆</el-button>
      </el-col>
      <el-col :span="4" :offset="8">
        <el-input
          placeholder="请输入驾驶员、手机号或品牌"
          v-model="usertj"
          @change="ck()"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
    </el-row>

    <el-dialog title="添加车辆" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="车主">
              <el-select v-model="form.userid" placeholder="请选择">
                <el-option
                  :label="obj.username"
                  :value="obj.userid"
                  v-for="(obj, i) in syczname"
                  :key="i"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="驾驶员">
              <el-col :span="12">
                <el-input v-model="form.resdriver"></el-input>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="车牌号码">
              <el-col :span="12">
                <el-input v-model="form.ulicense"></el-input>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-col :span="12">
                <el-input v-model="form.driverphone"></el-input>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="车辆品牌">
              <el-select v-model="form.vbrandid" placeholder="请选择">
                <el-option
                  :label="obj.vbrandname"
                  :value="obj.vbrandid"
                  v-for="(obj, i) in sypp"
                  :key="i"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆型号">
              <el-select v-model="form.vtypeid" placeholder="请选择">
                <el-option
                  :label="obj.vtypename"
                  :value="obj.vtypeid"
                  v-for="(obj, i) in syxh"
                  :key="i"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="车辆归属">
              <el-select v-model="form.affiliationid" placeholder="请选择">
                <el-option
                  :label="obj.affiliationname"
                  :value="obj.affiliationid"
                  v-for="(obj, i) in sygs"
                  :key="i"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="里程">
              <el-col :span="12">
                <el-input v-model="form.umileage"></el-input>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="上牌日期">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.registereddate"
                style="width: 100%"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="购买日期">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.buydate"
                style="width: 100%"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ok()">确 定</el-button>
      </div>
    </el-dialog>

    <template>
      <el-table
        :data="ckulist"
        style="width: 1350px"
        max-height="320"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <el-table-column width="80" label="序号">
          <template slot-scope="temp">
            {{ temp.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="userno" label="客户编号" width="150">
        </el-table-column>
        <el-table-column prop="resdriver" label="驾驶员" width="150">
        </el-table-column>
        <el-table-column prop="ulicense" label="车牌号码" width="150">
        </el-table-column>
        <el-table-column prop="vbrandname" label="车辆品牌" width="150">
        </el-table-column>
        <el-table-column prop="driverphone" label="联系电话" width="150">
        </el-table-column>
        <el-table-column prop="vtypename" label="车辆型号" width="150">
        </el-table-column>
        <el-table-column prop="affiliationname" label="车辆归属" width="150">
        </el-table-column>
        <el-table-column prop="umileage" label="里程(km)" width="150">
        </el-table-column>
        <el-table-column prop="registereddate" label="上牌日期" width="150">
        </el-table-column>
        <el-table-column prop="buydate" label="购买日期" width="150">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="modif(scope.row.uvehicleid)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="del(scope.row.uvehicleid)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <br />
    <br />
    <br />
    <!--用户查询 -->

    <el-tag type="">客户信息</el-tag>
    <template>
      <el-table :data="cerlist" border style="width: 1300px">
        <el-table-column width="80" label="#">
          <template slot-scope="temp">
            {{ temp.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="userno" label="客户编号" width="180">
        </el-table-column>
        <el-table-column prop="username" label="客户名称" width="180">
        </el-table-column>
        <el-table-column prop="userphone" label="手机"> </el-table-column>
        <el-table-column prop="usertime" label="创建时间"> </el-table-column>
        <el-table-column prop="isvip" label="客户等级" width="150">
          <template slot-scope="temp">
            <span v-if="temp.row.isvip == 0">普通用户</span>
            <span v-if="temp.row.isvip == 1">会员用户</span>
          </template>
        </el-table-column>
        <el-table-column prop="uamount" label="用户额度"> </el-table-column>
        <el-table-column prop="uintegral" label="积分"> </el-table-column>
        <el-table-column prop="usercomment" label="备注"> </el-table-column>
      </el-table>
    </template>

    <el-dialog
      title="修改信息"
      :visible.sync="dialogTableVisible"
      ref="registerRef"
    >
      <el-form :model="xguser">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="车主">
              <el-select v-model="xguser.userid" placeholder="请选择" required>
                <el-option
                  :label="obj.username"
                  :value="obj.userid"
                  v-for="(obj, i) in syczname"
                  :key="i"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="驾驶员" required>
              <el-col :span="12">
                <el-input v-model="xguser.resdriver"></el-input>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="车牌号码">
              <el-col :span="12">
                <el-input v-model="xguser.ulicense"></el-input>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-col :span="12">
                <el-input v-model="xguser.driverphone"></el-input>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="车辆品牌">
              <el-select v-model="xguser.vbrandid" placeholder="请选择">
                <el-option
                  :label="obj.vbrandname"
                  :value="obj.vbrandid"
                  v-for="(obj, i) in sypp"
                  :key="i"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆型号">
              <el-select v-model="xguser.vtypeid" placeholder="请选择">
                <el-option
                  :label="obj.vtypename"
                  :value="obj.vtypeid"
                  v-for="(obj, i) in syxh"
                  :key="i"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="车辆归属">
              <el-select v-model="xguser.affiliationid" placeholder="请选择">
                <el-option
                  :label="obj.affiliationname"
                  :value="obj.affiliationid"
                  v-for="(obj, i) in sygs"
                  :key="i"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="里程">
              <el-col :span="12">
                <el-input v-model="xguser.umileage"></el-input>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="上牌日期">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="xguser.registereddate"
                style="width: 100%"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="购买日期">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="xguser.buydate"
                style="width: 100%"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="xgok()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    //这里存放数据
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        userid: "",
        vbrandid: "",
        vtypeid: "",
        affiliationid: "",
        ulicense: "",
        resdriver: "",
        driverphone: "",
        umileage: "",
        registereddate: "",
        buydate: "",
      },
      formLabelWidth: "100px",
      ckulist: [],
      usertj: "",
      currentRow: "",
      cerlist: [],
      xguser: {},
      syczname: [],
      sypp: [],
      syxh: [],
      sygs: [],
    };
  },
  //计算属性
  computed: {},
  //方法集合
  methods: {
    xgok() {
      let th = this;
      this.$http
        .put("http://localhost:8080/c/lscusveh/xg", this.xguser)
        .then((resp) => {
          if (resp.data > 0) {
            this.$message({
              showClose: true,
              message: "信息修改成功",
              type: "success",
            });
            th.dialogTableVisible = false;
            th.ck();
          } else {
            this.$message.error("信息修改失败");
          }
        });
    },
    tjkh() {
      this.dialogFormVisible = true;

      this.inclean();
    },
    modif(kh) {
      this.dialogTableVisible = true;
      let thiss = this;
      this.$http
        .get("http://localhost:8080/c/lscusveh/qone", {
          params: {
            id: kh,
          },
        })
        .then((resp) => {
          //console.info(resp.data)
          thiss.xguser = resp.data;
        });
    },
    ck() {
      let thiss = this;
      this.$http
        .get("http://localhost:8080/c/lscuv/quv", {
          params: {
            rd: thiss.usertj,
          },
        })
        .then((resp) => {
          console.info(resp.data);
          thiss.ckulist = resp.data;
        });
    },
    ok() {
      this.dialogFormVisible = false;
      //console.info(this.form)
      let th = this;
      this.$http
        .post("http://localhost:8080/c/lscusveh/add", this.form)
        .then((resp) => {
          if (resp.data > 0) {
            this.$message({
              showClose: true,
              message: "车辆添加成功",
              type: "success",
            });
          } else {
            this.$message.error("客户添加失败");
          }
          th.ck();
        });
    },
    inclean() {},
    del(id) {
      let th = this;
      this.$confirm("是否对客户进行删除？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "放弃删除",
      })
        .then(() => {
          this.$http
            .delete("http://localhost:8080/c/lscusveh/del", {
              params: {
                usid: id,
              },
            })
            .then((resp) => {
              if (resp.data > 0) {
                this.$message({
                  showClose: true,
                  message: "车辆删除成功",
                  type: "success",
                });
              } else {
                this.$message.error("车辆删除失败");
              }
              th.ck();
            });
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message:
              action === "cancel" ? "放弃删除并离开页面" : "返回当前页面",
          });
        });
      //alert(id)
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      //console.info(val)
      let th = this;
      this.$http
        .get("http://localhost:8080/c/user/usno", {
          params: {
            usn: val.userno,
          },
        })
        .then((resp) => {
          //console.info(resp.data)
          th.cerlist = resp.data;
        });
    },
  },
  //挂载完成（可以访问DOM元素）
  mounted() {
    this.ck();
    let thiss = this;
    this.$http.get("http://localhost:8080/c/lscaff/all").then((resp) => {
      // console.info(resp.data)
      thiss.sygs = resp.data;
    });
    this.$http.get("http://localhost:8080/c/lscvech/all").then((resp) => {
      // console.info(resp.data)
      thiss.sypp = resp.data;
    });
    this.$http.get("http://localhost:8080/c/lscvetype/all").then((resp) => {
      // console.info(resp.data)
      thiss.syxh = resp.data;
    });
    this.$http
      .get("http://localhost:8080/c/user/querall", {
        params: {
          usertj: "",
        },
      })
      .then((resp) => {
        // console.info(resp.data)
        thiss.syczname = resp.data;
      });
  },
  //监控data中的数据变化
  watch: {},
};
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
}
</style>